<template>
    <!-- 收货地址 -->
  <van-contact-card
    v-if="address"
    type="edit"
    :tel="address.mobile"
    :name="`${address.consignee}—${address.region_text}`"
    :editable="false"
  />

  <!-- 订单列表 -->
  <van-card
    v-for="(item, index) in product"
    :key="index"
    :title="item.products.name"
    :num="item.nums"
    :thumb="item.products.thumbs_text"
    @click-thumb="toProductInfo(item.proid)"
  >
    <!-- 卡片插槽部分 -->
    <template #title>
      <div class="title">{{ item.products.name }}</div>
    </template>

    <template #desc v-if="item.attrs && item.attrs.length > 0">
      <van-tag
        v-for="(value, key) in item.attrs"
        :key="key"
        class="tag"
        round
        plain
        type="primary"
        >{{ value.value }}</van-tag
      >
    </template>
    <template #desc v-else>
      <van-tag class="tag" round plain type="warning">无规格数据</van-tag>
      <!-- 单价 -->
    </template>
    <template #tags>
      <div>单价：￥{{ item.price }}</div>
    </template>
    <template #price>
      <div>合计：￥{{ item.total }}</div>
    </template>
  </van-card>

   <!-- 订单信息 -->
   <van-cell title="订单号" :value="order.code" />
  <van-cell title="订单总价" :value="`￥${order.amount}`" />
  <van-cell title="支付方式" :value="order.pay_text" />
  <van-cell title="订单状态" :value="order.status_text" />
  <van-cell title="优惠金额" :value="`-￥${order.coupon_amount}`" />
  <van-cell title="下单时间" :value="order.createtime_text" />
  <van-cell title="订单描述" :value="order.remark" />

  <!-- //底部按钮栏 -->
  <div class="actions">
    <van-button square hairline type="primary" size="large">在线客服</van-button>
    <van-button square hairline type="danger" size="large" @click="OrderApplyPay">申请退款</van-button>
    <!-- <van-button square hairline type="success" size="large">物流详情</van-button> -->
    <!-- <van-button square hairline type="success" size="large">确认收货</van-button>
    <van-button square hairline type="warning" size="large">立即评价</van-button>
    <van-button square hairline type="danger" size="large">申请退货</van-button> -->
  </div>
</template>
<script setup>
import { getCurrentInstance, onBeforeMount } from "vue";

const { proxy } = getCurrentInstance();

let orderid = proxy.$route.query.orderid ? proxy.$route.query.orderid : 0;
let product = ref([]);
let address = ref(null);
let order = ref({});

onBeforeMount(()=>{
    OrderData()
})

const OrderData = async ()=>{
    if(!proxy.$business.value.id){
        return false
    }
    var params = {
      orderid:orderid,
      busid: proxy.$business.value.id
    }

    var result = await proxy.$POST({
      url: '/order/info',
      params
    })
    if(result.code == 0){
        proxy.$fail(result.msg);
        return false
    }
    //收货地址
    address.value = result.data.address
    order.value = result.data.order

    if(result.data.product){
        result.data.product.map((item) => (item.attrs = JSON.parse(item.attrs)));
    }
    //商品数据
    product.value = result.data.product

    console.log(result.data.order)
    return false
}

// 申请退款
const OrderApplyPay = ()=>{
    console.log(2123132)
}
</script>
<style scoped>
.actions{
    position: fixed;
    left: 0;
    bottom: 0;
    display: flex;
    width: 100%;
}
</style>